<template>
  <div class="app-container">
<!--    <el-card class="box-card" shadow="never" style="margin-bottom: 30px">-->
<!--      <div style="margin-bottom: 10px">-->
<!--        <el-tag v-for="item in dataDict.TodoRequirementsNormal" :key="item.key" style="margin-right:5px">{{ $t('BookStore2[\''+ item.key +'\']') }}</el-tag>-->
<!--      </div>-->
<!--      <div>-->
<!--        <el-tag v-for="item in dataDict.TodoRequirementsUrgent" :key="item.key" type="danger" style="margin-right:5px">{{ $t('BookStore2[\''+ item.key +'\']') }}</el-tag>-->
<!--      </div>-->
<!--    </el-card>-->
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('BookStore2[\'Display:TodoHandleStatus\']')" prop="status">
        <el-select v-model="listContext.status" :placeholder="$t('BookStore2[\'Display:TodoHandleStatus\']')" clearable>
          <el-option :label="$t('BookStore2[\'Enum:TodoHandleStatus:1\']')" :value="1" />
          <el-option :label="$t('BookStore2[\'Enum:TodoHandleStatus:2\']')" :value="2" />
          <el-option :label="$t('BookStore2[\'Enum:TodoHandleStatus:3\']')" :value="3" />
          <el-option :label="$t('BookStore2[\'Enum:TodoHandleStatus:4\']')" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:TodoType\']')" prop="todoType">
        <el-select v-model="listContext.todoType" :placeholder="$t('BookStore2[\'Display:Type\']')" clearable>
          <el-option :label="$t('BookStore2[\'Enum:TodoType:1\']')" :value="1" />
          <el-option :label="$t('BookStore2[\'Enum:TodoType:2\']')" :value="2" style="color:red" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'VehicleNumber\']')" prop="vehicleNumber">
        <el-input v-model="listContext.vehicleNumber" @keyup.enter.native="fetchData" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">
          <i class="el-icon-search" />
        </el-button>
      </el-form-item>
      <el-button v-if="!openTimer" class="btn-auto-fresh" style="background-color: #13ce66;" icon="el-icon-video-play" @click="openInterval">{{ $t('BookStore2[\'AutoFresh\']') }}</el-button>
      <el-button v-else class="btn-auto-fresh" style="background-color: #e6b000;" icon="el-icon-video-pause" @click="closeInterval">{{ $t('BookStore2[\'AutoFresh\']') }}</el-button>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('BookStore2[\'LoadingWithThreeDot\']')"
      :empty-text="$t('BookStore2[\'NoDataAvailableInDatatable\']')"
      border
      fit
      highlight-current-row
      height="calc(100vh - 225px)"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('BookStore2[\'VehicleNumber\']')" prop="vehicleNumber">
        <template slot-scope="scope">
          {{ scope.row.vehicleNumber }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Lane\']')" prop="lane" width="70">
        <template slot-scope="scope">
          {{ scope.row.lane ? 'L' + scope.row.lane + '-' + scope.row.spot : '' }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Driver\']')" prop="driverName">
        <template slot-scope="scope">
          {{ scope.row.driverName }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:CreationTime\']')" prop="creationTime" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.creationTime | dateYMDHMSFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:TodoRequirements\']')" prop="requirements">
        <template slot-scope="scope">
          {{ scope.row.requirements }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:TodoType\']')" prop="todoType" sortable="custom">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.todoType===1">{{ scope.row.todoType && $t('BookStore2[\'Enum:TodoType:' + scope.row.todoType + '\']') }}</el-tag>
          <el-tag v-else type="danger">{{ scope.row.todoType && $t('BookStore2[\'Enum:TodoType:' + scope.row.todoType + '\']') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:Remark\']')" prop="remark">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Display:TodoHandleStatus\']')" prop="currentHandleStatus" width="90">
        <template slot-scope="scope">
          {{ scope.row.currentHandleStatus && $t('BookStore2[\'Enum:TodoHandleStatus:' + scope.row.currentHandleStatus + '\']') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('BookStore2[\'Actions\']')" width="110">
        <template slot-scope="scope">
          <el-button v-if="checkPermission('BookStore2Todo.Approval')" v-show="scope.row.currentHandleStatus === 1" type="success" size="small" icon="el-icon-check" circle @click="clickActionDropDown({ action: 'accepted', row: scope.row })" />
          <el-button v-if="checkPermission('BookStore2Todo.Approval')" v-show="scope.row.currentHandleStatus === 1" type="danger" size="small" icon="el-icon-close" circle @click="clickActionDropDown({ action: 'rejected', row: scope.row })" />
          <el-button v-if="checkPermission('BookStore2Todo.Approval')" v-show="scope.row.currentHandleStatus === 2" type="primary" size="small" icon="el-icon-finished" circle @click="clickActionDropDown({ action: 'finished', row: scope.row })" />
        </template>
      </el-table-column>
      <el-table-column width="90">
        <template slot-scope="scope">
          <el-button type="text" @click="clickActionDropDown({ action: 'handleRecords', row: scope.row })">{{  $t('BookStore2[\'TodoHandleRecords\']') }}</el-button>
<!--          <el-dropdown trigger="click" @command="clickActionDropDown">-->
<!--            <el-button type="primary">-->
<!--              <i class="el-icon-setting" />-->
<!--              {{ $t('BookStore2[\'Actions\']') }}-->
<!--              <i class="el-icon-arrow-down" />-->
<!--            </el-button>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item :command="{ action: 'handleRecords', row: scope.row }">{{ $t('BookStore2[\'TodoHandleRecords\']') }}</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 10px">
      <el-pagination
        :page-sizes="pageContext.pageSizes"
        :page-size.sync="listContext.maxResultCount"
        :current-page.sync="pageContext.currentPage"
        :total="pageContext.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchData"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :title="$t('BookStore2[\'TodoHandleRecords\']')" :visible.sync="todoHandleRecordsDialogVisible">
      <el-table :data="selectTodoHandleRecords">
        <el-table-column prop="status" :label="$t('BookStore2[\'Display:TodoHandleStatus\']')">
          <template slot-scope="scope">
            {{ $t('BookStore2[\'Enum:TodoHandleStatus:' + scope.row.status + '\']') }}
          </template>
        </el-table-column>
        <el-table-column property="handlerName" :label="$t('BookStore2[\'Display:HandlerName\']')"></el-table-column>
        <el-table-column property="result" :label="$t('BookStore2[\'Display:HandlerResult\']')"></el-table-column>
        <el-table-column prop="creationTime" :label="$t('BookStore2[\'Display:CreationTime\']')">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateYMDHMSFormat }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getList, approval } from '@/api/todo/todo'
// import { getDataDict } from '@/api/data-dict/data-dict'
import { checkPermission } from '@/utils/abp'
export default {
  name: 'Todo',
  data() {
    return {
      list: null,
      listLoading: false,
      pageContext: {
        pageSizes: [10, 25, 50, 100],
        totalCount: 0,
        currentPage: 1
      },
      listContext: {
        status: 1,
        todoType: '',
        vehicleNumber: '',
        sorting: '',
        skipCount: 0,
        maxResultCount: 10
      },
      createOrEditDialogCtx: {
        id: '',
        title: '',
        actionMode: ''
      },
      createOrEditDialogVisible: false,
      // dataDict: {},
      todoHandleRecordsDialogVisible: false,
      selectTodoHandleRecords: [],
      timeout: 5, // 5秒
      timer: null,
      openTimer: false
    }
  },
  created() {
    this.fetchData()
    // this.dataDict = await getDataDict(['TodoRequirementsNormal', 'TodoRequirementsUrgent'])
  },
  destroyed() {
    this.closeInterval()
  },
  methods: {
    checkPermission,
    openInterval() {
      if (this.timeout < 5) {
        this.$message({
          message: this.$t('BookStore2[\'TimeIntervalMustGreaterThan{0}Seconds\']', [5]),
          type: 'error'
        })
        return
      }
      if (this.timer) {
        this.closeInterval()
      }
      this.timer = window.setInterval(() => {
        setTimeout(this.fetchData, 0)
      }, this.timeout * 1000)
      this.openTimer = true
    },
    closeInterval() {
      window.clearInterval(this.timer)
      this.openTimer = false
    },
    fetchData() {
      this.listLoading = true
      getList(this.listContext).then((response) => {
        this.list = response.items
        this.pageContext.totalCount = response.totalCount
        this.listLoading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.listContext.skipCount = (currentPage - 1) * this.listContext.maxResultCount
      this.fetchData()
    },
    sortChange({ prop, order }) {
      this.listContext.sorting = ''
      if (order) {
        this.listContext.sorting = prop + ' ' + order
      }
      this.fetchData()
    },
    clickActionDropDown(ctx) {
      switch (ctx.action) {
        case 'accepted':
          this.$confirm(this.$t('BookStore2[\'AreYouSure\']')).then(async _ => {
            await approval(ctx.row.id, { handleResult: 'accepted', action: 2 })
            this.$message({
              message: this.$t('BookStore2[\'Ok\']'),
              type: 'success'
            })
            this.fetchData()
          }).catch(_ => {})
          break
        case 'rejected':
          this.$confirm(this.$t('BookStore2[\'AreYouSure\']')).then(async _ => {
            await approval(ctx.row.id, { handleResult: 'rejected', action: 3 })
            this.$message({
              message: this.$t('BookStore2[\'Ok\']'),
              type: 'success'
            })
            this.fetchData()
          }).catch(_ => {})
          break
        case 'finished':
          this.$confirm(this.$t('BookStore2[\'AreYouSure\']')).then(async _ => {
            await approval(ctx.row.id, { handleResult: 'finished', action: 4 })
            this.$message({
              message: this.$t('BookStore2[\'Ok\']'),
              type: 'success'
            })
            this.fetchData()
          }).catch(_ => {})
          break
        case 'handleRecords':
          this.selectTodoHandleRecords = ctx.row.handleRecords
          this.todoHandleRecordsDialogVisible = true
          break
      }
    },
    openCreateDialog() {
      this.createOrEditDialogVisible = true
      this.createOrEditDialogCtx = {
        title: this.$t('BookStore2[\'NewTodo\']'),
        actionMode: 'create'
      }
    },
    openEditDialog(id) {
      this.createOrEditDialogVisible = true
      this.createOrEditDialogCtx = {
        title: this.$t('BookStore2[\'Edit\']'),
        actionMode: 'edit',
        id: id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-auto-fresh {
  font-size: 15px;
  color: #ffffff;
  //width: 150px;
  //height: 40px;
}
</style>

